<div class="table-responsive grade-table" id="grades-table">
  <div class="table-wrapper grade-table-wrapper">
    <h3 class="table-title grade-table-title">成绩管理</h3>
    <div class="action-btns grade-action-btns">
      <!-- 添加课程按钮 -->
      <button data-toggle="modal" data-target="#add-grade-modal" class="btn btn-primary">录入成绩</button>
    </div><br>
    <!-- 省略实际表格内容；可根据需求填充表格 -->
    <table class="table table-hover grade-table">
      <thead>
      <tr>
        <th>成绩编号</th>
        <th>学生名</th>
        <th>课程名称</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody id="grades-tbody">
      <!-- 使用 JavaScript 动态填充课程数据 -->
      </tbody>
    </table>
  </div>
</div>
<!-- 增加成绩模态框 -->
<div class="modal fade" id="add-grade-modal" tabindex="-1" role="dialog" aria-labelledby="add-grade-modal-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-grade-modal-label">录入成绩</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="add-grade-form">
          <div class="form-group">
            <label for="student-name">学生名</label>
            <input type="text" class="form-control" id="student-name" placeholder="请输入学生名称">
          </div>
          <div class="form-group">
            <label for="course-name-grade">课程名称</label>
            <input type="text" class="form-control" id="course-name-grade" placeholder="请输入课程名称">
          </div>
          <div class="form-group">
            <label for="grade">成绩</label>
            <input type="number" class="form-control" id="grade" placeholder="请输入成绩" min="0" max="100">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="add-grade-btn">录入成绩</button>
      </div>
    </div>
  </div>
</div>

<!-- 编辑成绩模态框 -->
<div class="modal fade" id="edit-grade-modal" tabindex="-1" role="dialog" aria-labelledby="edit-grade-modal-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-grade-modal-label">编辑成绩</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="edit-grade-form">
          <input type="hidden" id="edit-grade-id">
          <div class="form-group">
            <label for="edit-student-name">学生名</label>
            <input type="text" class="form-control" id="edit-student-name" placeholder="请输入学生名称">
          </div>
          <div class="form-group">
            <label for="edit-course-name-grade">课程名称</label>
            <input type="text" class="form-control" id="edit-course-name-grade" placeholder="请输入课程名称">
          </div>
          <div class="form-group">
            <label for="edit-grade">成绩</label>
            <input type="number" class="form-control" id="edit-grade" placeholder="请输入成绩" min="0" max="100">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="saveGradeChangesBtn">保存更改</button>
      </div>
    </div>
  </div>
</div>